{% extends "base.html" %}
{% block content %}
    <div class="text-center">
        <h1>DJ Dani Fansite</h1>
        <p class="lead my-3">
            🎧  modern beats mixed here
        </p>
        <img src="{{ url_for('static', filename='img/djdani.png') }}" alt="DJ Dani" class="rounded-circle ms-2 my-3">
    </div>
    <div class="text-center my-4 container">
        <div class="card shadow-sm bg-dark text-white">
            <div class="card-body text-center">
                <h4 class="card-title">Stream the latest set from DJ Dani!</h4>
                <audio id="audio-player" controls preload="metadata" style="width: 90%;">
                    <source src="{{ url_for('static', filename='mp3/DeepHouse-2025-05-11.flac') }}" type="audio/flac">
                    Your browser does not support the audio element.
                </audio>
                <div class="mt-4">
                    <button class="btn btn-light btn-sm" onclick="document.getElementById('audio-player').play()">
                        <img src="{{ url_for('static', filename='icons/play-circle-fill.svg') }}" class="bi" width="32" alt="PLAY">
                    </button>
                    <button class="btn btn-light btn-sm" onclick="document.getElementById('audio-player').pause()">
                        <img src="{{ url_for('static', filename='icons/pause-circle-fill.svg') }}" class="bi" width="32" alt="PAUSE">
                    </button>
                    <button class="btn btn-light btn-sm" onclick="document.getElementById('audio-player').currentTime = 0">
                        <img src="{{ url_for('static', filename='icons/rewind-circle-fill.svg') }}" class="bi" width="32" alt="REWIND">
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
